<template>
	<div id="top" :style="{backgroundColor:bgcolor}">
		<!-- 顶部栏 -->
		<div @click="goBack()" class="left">
			<span class="iconfont icon-xiangzuojiantou" v-show="left"></span>
		</div>
		<div class="conter">
			<span>{{ conter }}</span>
		</div>
		<div class="right">
			<span @click="rigbtn()">{{ right }}</span>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			conter: {
				type: String,
				default: ''
			},
			right: {
				type: String,
				default: ''
			},
			bgcolor: {
				typr: String,
				default: "#f00 "
			},
			left: {
				type: Boolean,
				default: true
			}
		},
		methods: {
			goBack() {
				if (this.left) {
					this.$router.go(-1);
				} else {
					return
				}
			},
			// 右侧
			rigbtn() {
				// 向父组件传递信息
				this.$emit('rightBtn')
			}
		}
	}
</script>

<style lang="scss" scoped>
	// scss 变量
	$width: (100vw / 375);

	#top {
		position: fixed;
		top: 0 * $width;
		width: 100%;
		height: 44 * $width;
		display: flex;
		z-index: 999;

		div:nth-of-type(1) {
			width: 15%;
			text-align: center;

			span {
				font-size: 20 * $width;
				line-height: 44 * $width;
				color: #fff;
			}
		}

		div:nth-of-type(2) {
			width: 70%;
			text-align: center;
			line-height: 44 * $width;
			color: #fff;
			font-size: 16 * $width;
			font-size: 16 * $width;
		}

		div:nth-of-type(3) {
			width: 15%;
			line-height: 44 * $width;
			color: #fff;
			font-size: 16 * $width;
		}
	}
</style>
